<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas width="500" height="400" style="border: 5px dotted rgb(218, 74, 22);" id="mycanvas"></canvas>
</body>
<script>
    var c = document.getElementById('mycanvas');
    var ctx = c.getContext('2d');
    ctx.arc(250, 200, 200, 0, 2 * Math.PI, true)
    ctx.fillStyle = 'yellow'
    ctx.fill();

    var grd = ctx.createRadialGradient(250, 200, 100, 250, 200, 160)
    grd.addColorStop('0', 'yellow');
    grd.addColorStop('0.5', 'red');
    grd.addColorStop('1', 'white');
    ctx.fillStyle = grd;
    ctx.fill()
</script>

</html>